<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div {
        width: 500px;
        margin: 0 auto;
    }
    h3 {
        text-align: center;
    }
    meter{
        width: 500px;
        margin: 50px 0;
    }
    #text{
      width: 500px;
        display: block;
        text-align: center;
     }
</style>
<body>
<!--刻度值-->
    <div>
        <meter min="0" low="20000" max="100000" high="" optimum="90000" value="999999"></meter>
        <p id="text"></p>
        <!--里最优值越近，越绿-->
        <meter id="m3" min="0" max="100000"  low="20000" high="90000" optimum="99999" value="0"></meter>
    </div>

</body>
<script>
    var sclary=0;
    var timer=setInterval(function () {
        sclary+=10;
        text.innerHTML="正在涨工资"+sclary+"元 坏听...";
        m3.value=sclary;
        if(sclary>=100000){
            clearInterval(timer);
            text.innerHTML="工资已涨到最大值";
        }
    },1)
</script>
</html>